// 构建 webpack --config webpack.config.js   可指定配置文件
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
// css分离 它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。

// 用于生成新的出口替换原来的index.html
const HtmlWebpackPlugin = require('html-webpack-plugin');

// 用于清理已构建文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
// 内联manifest
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin');

// Shimming 用于处理某些第三方library全局依赖比如jquery

// resolve 
var resolve = {
    // 将libray的dist版本链接到src版本的别名上，这样可以让webpack更好地优化依赖
    alias: {
        jquery: "jquery/src/jquery"
    }
}

// publicPath 公共路径，在生产环境下，如果想把静态文件统一使用CDN加载。就要配置该项

// source map
var devtool = "cheap-eval-source-map";
console.log(process.env.NODE_ENV + '    env');
console.log(process.env.NODE_ENV == 'dev');
var _dev_ = process.env.NODE_ENV == 'dev';
// 入口
var entry = {
    app: './src/index.js',
    vendor: ['moment', 'jquery']
};
// 输出
var output = {
    filename: !_dev_ ? 'script/[name].[hash:6].js' : 'script/[name].js',
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: '[name]/[hash:6].js'
}
var modules = {
    rules: [
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }
        , {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'sass-loader']
            })
        }, {
            test: /\.(png|svg|jpg|gif)$/,
            // url limit 可以将limit以下的文件转换为base64，从而减少http请求，默认为不限制
            loader: "url-loader?limit=8192&name=img/[name][hash:8].[ext]"
        }, {
            // 加载字体
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: [
                'file-loader'
            ]
        },
        {
            test: /\.(csv|tsv)$/,
            use: [
                'csv-loader'
            ]
        },
        {
            test: /\.xml$/,
            use: [
                'xml-loader'
            ]
        },
        {
            // es6
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "babel-loader"
        },
        // imports-loader
        // 引用之前遗留模块的代码中，插入必须的全局变量。比如某些遗留模块依赖与this作为window对象，而在commonJS上下文中执行的this等同于module.exports
        {
            test: require.resolve('./src/script/lib/needwindow.js'),
            use: 'imports-loader?this=>window'
        },
        // 设置define = false ，有助于强制使用CommonJS路径
        // {
        //     test: require.resolve('some-module'),
        //     use: 'imports-loader?define=>false'
        // }

        // exports-loader
        // 一个library创建了一个全局变量，他期望使用者通过全局变量去使用,参考mylib，没有按着commonJS来写。
        {
            test: require.resolve("./src/script/lib/mylib.js"),
            use: 'exports-loader?libCL=cl',
            // 在文件的源码中加入以下代码
            //  exports["file"] = file;
            //  exports["parse"] = helpers.parse;
        },

        // script-loader
        // 在全局上下文中执行代码，如同在script标签中加入代码。

        // noParse 选项
        // 当模块没有AMD/CommonJS版本时，并且希望直接引入dist版本，webpack将会直接引入这个模块并且不会解析，这样可以用来改善构建时间
        // 任何用到 AST 特性（比如 ProvidePlugin）都不会工作。
    ]
};
var plugins = [
    new webpack.HotModuleReplacementPlugin(), // 启用 HMR
    new ExtractTextPlugin({
        filename: 'common.css',
        // 修改文件名
        // filename: function(getPath)  {
        //     return getPath('css/[name].css').replace('css/js','css');
        // },
        // 从所有额外的chunk提取。当使用CommonsChunkPlugin并且在公共chunk中有提取的chunk，必须设置为true
        allChunks: true,
        // // 禁用插件
        // disable: false,
        // // 禁用顺序检查
        // ignoreOrder: false
    }),
    // 提取SASS 或 less
    new ExtractTextPlugin('commonsass.scss'),
    new HtmlWebpackPlugin({
        title: 'Output Management',
        chunks: ['manifest', 'vendor', 'app'],
        // 输出模版
        template: 'html-withimg-loader!' + path.resolve(__dirname, './src/index.html')
    }),
    new CleanWebpackPlugin(['dist']),
    // 加载不支持AMD或者CommonJS等插件
    // 此插件可以将模块作为一个变量，被webpa在其他每个模块中引用。只有你需要使用此变量时，这个模块才会被require进来。
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "windows.jQuery": "jquery"
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: ['vendor', 'manifest'] //指定公共bundle的名字
    }),
    // new InlineManifestWebpackPlugin({
    //     name: 'webpackManifest'
    // })
];
var config = {
    entry: entry,
    output: output,
    module: modules,

};
// 构建配置
if (_dev_) {
    console.log('dev start!');
    devtool = "cheap-eval-source-map";
    config.devServer = {
        port: '8081',
        host: 'localhost',
        historyApiFallback: true,
        hot: true, // 告诉 dev-server 我们在使用 HMR
        // contentBase: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        inline: true

    }
} else {
    console.log('prod start!');
    plugins.push(new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }));
    // 修改资源位置
    // publicPath =  process.env.NODE_ENV == 'test' ? '测试资源url':'线上资源url';
    devtool = "source-map";
}
config.plugins = plugins;
module.exports = config;